<!-- 订单管理 -->
<template>
  <div class="dashboard-container order-list customer-list-box">
    <div class="shang">
      <el-form
        ref="form"
        :inline="true"
        :model="form"
        class="demo-form-inline"
        size="large"
      >
        <el-form-item
          label="订单编号："
          prop="id"
        >
          <el-input
            v-model="form.id"
            placeholder="请输入订单编号"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="订单状态:"
          prop="status"
        >
          <el-select
            v-model="form.status"
            value-key="id"
            placeholder="请选择"
          >
            <el-option
              v-for="item in orderStatusOptions"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item
          label="付费状态"
          prop="paymentStatus"
        >
          <el-select
            v-model="form.paymentStatus"
            placeholder="请选择"
          >
            <el-option
              v-for="item in paymentStatusOptions"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item
          label="发件人姓名："
          prop="senderName"
        >
          <el-input
            v-model="form.senderName"
            placeholder="请输入发件人姓名"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="发件人电话："
          prop="senderPhone"
        >
          <el-input
            v-model="form.senderPhone"
            placeholder="请输入发件人电话"
          ></el-input>
        </el-form-item>
        <!-- 发件人地址 -->
        <el-form-item label="发件人地址：">
          <div class="select">
            <el-select
              v-model="form.senderProvinceId"
              placeholder="请选择省"
              @change="change"
            >
              <el-option
                v-for="item in provinceList"
                :key="item.areaId"
                prop="data.senderProvinceId"
                :label="item.areaName"
                :value="item.areaId"
              >
              </el-option>
            </el-select>
            <el-select
              v-model="form.senderCityId"
              placeholder="请选择市"
              @change="change1"
            >
              <el-option
                v-for="item in areaList"
                :key="item.areaId"
                :label="item.areaName"
                :value="item.areaId"
              >
              </el-option>
            </el-select>
            <el-select
              v-model="form.senderCountyId"
              placeholder="请选择县"
            >
              <el-option
                v-for="item in cityList"
                :key="item.areaId"
                :label="item.areaName"
                :value="item.areaId"
              >
              </el-option>
            </el-select>
          </div>
        </el-form-item>
        <el-form-item
          label="收件人姓名："
          prop="receiverName"
        >
          <el-input
            v-model="form.receiverName"
            placeholder="请输入收件人姓名"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="收件人电话："
          prop="receiverPhone"
        >
          <el-input
            v-model="form.receiverPhone"
            placeholder="请输入收件人电话"
          ></el-input>
        </el-form-item>
        <!-- 收件人地址 -->
        <el-form-item label="收件人地址：">
          <div class="select">
            <el-select
              v-model="form.receiverProvinceId"
              placeholder="请选择省"
              @change="changetwo"
            >
              <el-option
                v-for="item in provinceList1"
                :key="item.areaId"
                :label="item.areaName"
                :value="item.areaId"
              >
              </el-option>
            </el-select>
            <el-select
              v-model="form.receiverCityId"
              placeholder="请选择市"
              @change="change3"
            >
              <el-option
                v-for="item in areaList1"
                :key="item.areaId"
                :label="item.areaName"
                :value="item.areaId"
              >
              </el-option>

            </el-select>
            <el-select
              v-model="form.receiverCountyId"
              placeholder="请选择县"
              clearable
            >
              <el-option
                v-for="item in cityList1"
                :key="item.areaId"
                :label="item.areaName"
                :value="item.areaId"
              >
              </el-option>
            </el-select>
          </div>
        </el-form-item>
        <el-form-item class="btn">
          <el-button
            type="warning"
            @click="doSearch"
          >搜索</el-button>
          <el-button @click="resetForm">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="xia">
      <!-- 表格 -->
      <el-table
        :data="dataList"
        stripe
        style="width: 100%"
      >
        <el-table-column
          type="index"
          prop="index"
          label="序号"
          width="60"
        >
          <template slot-scope="scope">
            <span>{{
              scope.$index +
                (form.page - 1) *
                form.pageSize +
                1
            }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="id"
          label="订单编号"
          min-width="160px"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.id }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="transportOrder.id"
          label="运单编号"
          min-width="130px"
        >
          <template slot-scope="scope">
            <span>{{
              scope.row.transportOrder === null
                ? ''
                : scope.row.transportOrder.id
            }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="createTime"
          label="下单时间"
          min-width="160px"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.createTime }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="status"
          label="订单状态"
          min-width="90px"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.status == ' 23000'">待取件</span>
            <span v-else-if="scope.row.status == '23001'">已取件</span>
            <span v-else-if="scope.row.status == '23002'">网点自寄</span>
            <span v-else-if="scope.row.status == '23003'">网点入库</span>
            <span v-else-if="scope.row.status == '23004'">待装车</span>
            <span v-else-if="scope.row.status == '23005'">运输中</span>
            <span v-else-if="scope.row.status == '23006'">网点出库</span>
            <span v-else-if="scope.row.status == '23007'">待派送</span>
            <span v-else-if="scope.row.status == '23008'">派送中</span>
            <span v-else-if="scope.row.status == '23009'">已签收</span>
            <span v-else-if="scope.row.status == '23010'">拒收</span>
            <span v-else>已取消</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="senderName"
          label="发件人姓名"
          width="100"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.senderName }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="senderPhone"
          label="发件人电话"
          min-width="120"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.senderPhone }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="senderAddress"
          label="发件人地址"
          :formatter="formatter"
          width="150"
        >
        </el-table-column>
        <el-table-column
          prop="receiverName"
          label="收件人姓名"
          width="100"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.receiverName }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="receiverPhone"
          label="收件人电话"
          width="120"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.receiverPhone }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="address"
          label="收件人地址"
          :formatter="formatter1"
          width="120"
        >
        </el-table-column>
        <el-table-column
          prop="pickupType"
          label="取件类型"
          min-width="100"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.pickupType == 1">网点自寄</span>
            <span v-else>上门取件</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="paymentMethod"
          label="付费类型"
          min-width="100"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.paymentMethod == 1">预结</span>
            <span v-else>到付</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="paymentStatus"
          label="付费状态"
          min-width="100"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.paymentStatus == 1">未付</span>
            <span v-else>已付</span>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          fixed="right"
        >
          <template #default="{row}">
            <el-button
              type="text"
              size="small"
              @click="$router.push(`/edit-order/${row.id}`)"
            >查看详细</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--分页 -->
      <div class="pagination">
        <div
          v-show="dataList && dataList.length > 0"
          class="pages"
        >
          <el-pagination
            :current-page="Number(form.page)"
            :total="Number(total)"
            :page-size="Number(form.pageSize)"
            :page-sizes="[10, 20, 30, 50]"
            layout="total, sizes, prev, pager, next, jumper"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { orderList } from '@/api/order'
import options from '@/api/orderstatus.json'
import pickupoptions from '@/api/pickupstatus.json'
import { areaList } from '@/api/common'
import city from '@/api/city.json'
export default {
  name: 'Ordermanage',
  data() {
    return {
      provinceList: [], // 发货人省份列表
      areaList: [], // 发货人区域列表
      cityList: [], // 发货人城市列表
      provinceList1: [], // 发货人省份列表
      areaList1: [], // 发货人区域列表
      cityList1: [],
      orderId: '',
      // areaList: [],
      multipleSelection: [],
      // provinceList: [],
      // cityList: [],
      countryList: [],
      countryReceiverList: [],
      receiverCityList: [],
      orderStatusOptions: '',
      pickUpTypeOptions: '',
      paymentStatusOptions: [
        {
          id: 1,
          name: '未付'
        },
        {
          id: 2,
          name: '已付'
        }
      ],
      form: {
        page: 1,
        pageSize: 5,
        id: '',
        senderName: '',
        senderPhone: '',
        receiverName: '',
        receiverPhone: '',
        status: '',
        pickUpType: '',
        createTime: '',
        // 派件人
        senderProvinceId: '',
        senderCityId: '',
        senderCountyId: '',
        // 收件人
        receiverProvinceId: '',
        receiverCityId: '',
        receiverCountyId: '',
        paymentStatus: ''
      },
      dataList: []
    }
  },
  watch: {
    'form.senderProvinceId': {
      deep: true,
      async handler(newlist, oldlist) {
        console.log(newlist, oldlist, '监听结果')
        if (newlist) {
          const res = this.provinceList.filter(item => {
            return item.areaId === newlist
          })
          this.areaList = res[0].cities
        }
      }
    },
    'form.senderCityId': {
      deep: true,
      async handler(newlist, oldlist) {
        console.log(newlist, oldlist, '监听结果')
        if (newlist) {
          const res = this.areaList.filter(item => {
            return item.areaId === newlist
          })
          console.log(res, 'sssssssssssss')
          this.cityList = res[0].counties
        }
      }
    },
    'form.receiverProvinceId': {
      deep: true,
      async handler(newlist, oldlist) {
        console.log(newlist, oldlist, '监听结果')
        if (newlist) {
          const res = this.provinceList.filter(item => {
            return item.areaId === newlist
          })
          this.areaList1 = res[0].cities
        }
      }
    },
    'form.receiverCityId': {
      deep: true,
      async handler(newlist, oldlist) {
        console.log(newlist, oldlist, '监听结果')
        if (newlist) {
          const res = this.areaList1.filter(item => {
            return item.areaId === newlist
          })
          this.cityList1 = res[0].counties
        }
      }
    }
  },
  created() {
    this.orderStatusOptions = options // 订单状态
    this.pickUpTypeOptions = pickupoptions
    this.getList()
    this.area()
    this.provinceList = city
    this.provinceList1 = city
  },
  methods: {
    // 获取订单列表数据
    async getList() {
      // 查询
      const { data: res } = await orderList(this.form)
      // 获取数据给dataList
      this.dataList = res.items
      // 获取总条数
      this.total = res.counts
    },
    // 每页显示信息的条数
    handleSizeChange(page) {
      this.form.pageSize = page
      if (this.form.page === 1) {
        this.getList(this.form)
      }
    },
    // 发货人省份
    change() {
      if (this.form.senderCityId || this.form.senderCountyId) {
        this.form.senderCityId = null
        this.form.senderCountyId = null
        this.areaList = []
        this.cityList = []
      }
    },
    // 发货人城市
    change1() {
      if (this.form.senderCountyId) {
        this.form.senderCountyId = null
        this.cityList = []
      }
    },
    // 收货人省份
    changetwo() {
      if (this.form.receiverCityId || this.form.receiverCountyId) {
        this.form.receiverCityId = null
        this.form.receiverCountyId = null
        this.areaList1 = []
        this.cityList1 = []
      }
    },
    // 收货人城市
    change3() {
      if (this.form.receiverCountyId) {
        this.form.receiverCountyId = null
        this.cityList1 = []
      }
    },
    handleCurrentChange(page) {
      this.form.page = page
      this.getList()
    },
    // 搜索
    doSearch() {
      this.form.page = 1
      this.getList(this.form)
    },
    // 重置
    resetForm() {
      this.$refs.form.resetFields()
      this.form.senderProvinceId = ''
      this.form.senderCityId = ''
      this.form.senderCountyId = ''
      this.form.receiverProvinceId = ''
      this.form.receiverCityId = ''
      this.form.receiverCountyId = ''
      this.getList()
    },
    // 发件人详细地址
    formatter(row) {
      // console.log(row)
      return `${row.senderProvince.name} ${row.senderCity
        .name} ${row.senderCounty.name}  ${row.receiverAddress}`
    },
    // 收货人详细地址
    formatter1(row) {
      // console.log(row, '111')
      return `${row.receiverProvince.name} ${row.receiverCity.name} ${row.receiverCounty.name}  ${row.receiverAddress}`
    },
    // 省市区
    async area() {
      const res = await areaList()
      console.log(res)
      this.areaList = res.data
    }
  }
}
</script>
<style lang="scss" scoped>
.shang{
  width: 1350px;
  height: 300px;
  background-color: #fff;
  margin-top: 25px;
  margin-left:25px;
  margin-right:30px;
  padding-top: 20px;
  padding-left:30px;
  padding-right:30px;
}
.xia{
  width: 1350px;
  height: auto;
  background-color: #fff;
  margin-top: 25px;
  margin-left:25px;
  margin-right:30px;
  padding-top: 20px;
  padding-left:30px;
  padding-right:30px;
  padding-bottom:30px
}
.order-list ::v-deep .el-table td,
.el-table th {
  padding: 12px 0;
  min-width: 0;
  box-sizing: border-box;
  text-overflow: ellipsis;
  vertical-align: middle;
  position: relative;
  text-align: left;
  overflow: hidden;
}
  // height: 142px;

  ::v-deep .demo-form-inline {
    display: flex;
    flex-wrap: wrap;
    .el-form-item {
      text-align: left;
      width: 30%;
      input {
        width: 200px;
      }
      .select {
        display: flex;
        width: 200px;
        & .el-select:nth-child(n + 2) {
          margin-left: 10px;
        }
        .el-select {
          position: relative;
          width: 100px;

          .el-input__inner {
            width: 105px;
          }
        }
      }
    }
  }
</style>

